<template>
  <div>
    <el-button  type="info"  plain v-on:click="findAll()">全部</el-button>
        <el-select v-model="index" placeholder="支付方式" @change="printMethod" >
          <el-option
              v-for="method in Methods"
              :key="method.value"
              :label="method.value"
              :value="method.value"></el-option>
        </el-select>
      <el-button type="info" plain v-on:click="findByMethod()">查询</el-button>

    <el-select v-model="indexY" placeholder="年份" @change="selectByYear()" style="width: 100px">
      <el-option
          v-for="year in Years"
          :key="year.value"
          :label="year.value"
          :value="year.value"></el-option>
    </el-select>

    <el-select v-model="indexM" placeholder="月份" @change="selectByMonth" style="width: 100px">
      <el-option
          v-for="month in Months"
          :key="month.value"
          :label="month.value"
          :value="month.value"></el-option>
    </el-select>

    <el-table
        :data="outputDatas"
        stripe
        style="width: 100%" >
      <el-table-column
          prop="count"
          label="金额"
          width="180">
      </el-table-column>
      <el-table-column
          prop="kind"
          label="类别"
          width="180">
      </el-table-column>
      <el-table-column
          prop="method"
          label="支付方式"
          width="180">

      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          width="250">
      </el-table-column>
      <el-table-column
          prop="text"
          label="备注">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
            <i class="el-icon-edit" @click="goto(scope.row)"></i>
          &nbsp;&nbsp;&nbsp;

          <template>
            <el-popconfirm
                confirm-button-text="确定"
                @confirm="deleteById(scope.row)"
                cancel-button-text="算了算了"
                title="确定删除？可能造成无法挽回的错误"
            >
              <i class="el-icon-delete" slot="reference" ></i>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>


<script>
export default {
  name: "Output",
  methods:{
    selectByMonth(){
      const _this=this;
      let year=this.indexY;
      let month=this.indexM;
      console.log('http://localhost:9090/bookkeeping/selectByMonth/'+year+'/'+month+'/2')
      axios.get('http://localhost:9090/bookkeeping/selectByMonth/'+year+'/'+month+'/2').then(function (resp){
        _this.outputDatas=resp.data;
      })
    },
    selectByYear(){
      const _this=this;
      let year=this.indexY;
      axios.get('http://localhost:9090/bookkeeping/selectByYear/'+year).then(function (resp){
        _this.outputDatas=resp.data;
      })
      _this.indexM='';
    },
    deleteById(row){
      let _this=this
      let id=row.outputId
      axios.get('http://localhost:9090/bookkeeping/deleteById/'+id).then(function (resp){
        console.log(resp.data)
      })
      _this.findAll()
    },
    goto(row){
      this.$router.push({
        path: '/update',
        name: 'Update',
        params: {
          key:'key',
          msgKey:row
        }
      })
    },
    printMethod(){
      return this.index
    },
    findByMethod(){
      const _this=this;
      let method=_this.printMethod()
      axios.get('http://localhost:9090/bookkeeping/selectByMethod/'+method+'/2').then(function (resp){
        let jsonObj = JSON.parse(JSON.stringify(resp.data));
        _this.outputDatas=resp.data;
      })

    },

    findAll(){
      const _this=this;
      _this.outputDatas=[];
      axios.get('http://localhost:9090/bookkeeping/findByFlag/2').then(function (resp){
        let jsonObj = JSON.parse(JSON.stringify(resp.data));
        _this.outputDatas=resp.data;
      })
    },
    getYear(){
      let now = new Date();
      let year = now.getFullYear(); //得到年份
      return year;
    },
    getMonth(){
      let now = new Date();
      let month = now.getMonth()+1; //得到月份
      return month;
    }
  },
  data(){
    return {
      index:'',
      indexY:this.getYear(),
      indexM:this.getMonth(),
      Years:[
        {index:1,value:2017},
        {index:2,value:2018},
        {index:3,value:2019},
        {index:4,value:2020}
      ],
      Months:[
        {index:1,value:1},
        {index:2,value:2},
        {index:3,value:3},
        {index:4,value:4},
        {index:5,value:5},
        {index:6,value:6},
        {index:7,value:7},
        {index:8,value:8},
        {index:9,value:9},
        {index:10,value:10},
        {index:11,value:11},
        {index:12,value:12}
      ],
        Methods:[
          {index:1,value:'微信'},
          {index:2,value:'支付宝'},
          {index:3,value:'花呗'},
          {index:4,value:'现金'}
        ],

      outputDatas: [
        {
        count:10,
        date:'2020-11-5',
        id:1,
        kind:'服饰',
        method:'支付宝',
        text:'血赚',
        flag:'2'
      },
        {count:10,
          date:'2020-11-5',
          id:1,
          kind:'服饰',
          method:'支付宝',
          text:'血赚',
          flag:'2'  }]
    }

  },
  created() {
    const _this=this;
    _this.selectByMonth();
  }
}
</script>

<style scoped>

</style>